<template>
	<div class="more-page max-w-[1200px] mx-auto px-2">
		<div
			class="titile w-full flex justify-center items-center text-3xl font-bold text-blue-500 mt-16">
			<div class="main-category">AI工具</div>
			<icon name="material-symbols:chevron-right-rounded" :size="23" />
			<div class="sub-category">AI写作</div>
		</div>
		<div class="total-count flex justify-center items-center mt-3 border-b pb-5 mb-5">
			<div class="rounded-full px-3 py-1 text-xs bg-blue-300 text-white shadow-md">
				共 100 条数据
			</div>
		</div>
		<div class="select-categories mt-3 flex items-center flex-wrap">
			<el-dropdown trigger="click">
				<el-button>
					<span>选择分类</span>
					<icon name="material-symbols:keyboard-arrow-down-rounded" :size="20" />
				</el-button>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item>Action 1</el-dropdown-item>
						<el-dropdown-item>Action 2</el-dropdown-item>
						<el-dropdown-item>Action 3</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
			<div
				class="c-item mx-3 px-3 py-1 my-1 text-sm rounded-full cursor-pointer text-white bg-blue-500 shadow-md">
				AI写作
			</div>
			<div class="c-item mx-3 px-3 py-1 my-1 text-sm rounded-full cursor-pointer text-blue-500">
				AI写作
			</div>
			<div class="c-item mx-3 px-3 py-1 my-1 text-sm rounded-full cursor-pointer text-blue-500">
				AI写作
			</div>
			<div class="c-item mx-3 px-3 py-1 my-1 text-sm rounded-full cursor-pointer text-blue-500">
				AI写作
			</div>
			<div class="c-item mx-3 px-3 py-1 my-1 text-sm rounded-full cursor-pointer text-blue-500">
				AI写作
			</div>
			<div class="c-item mx-3 px-3 py-1 my-1 text-sm rounded-full cursor-pointer text-blue-500">
				AI写作
			</div>
			<div class="c-item mx-3 px-3 py-1 my-1 text-sm rounded-full cursor-pointer text-blue-500">
				AI写作
			</div>
		</div>
		<!-- 资源列表 -->
		<el-row class="w-full mt-3">
			<el-col class="p-2" :xs="24" :sm="12" :md="6" :lg="4" :xl="4" v-for="item in 12" :key="item">
				<resource-card
					name="蓝云博客"
					:visit-count="1000"
					url="https://lanyunblog.com/"
					desc="一个分享技术、生活、感悟的博客"
					icon="https://lanyunblog.com/favicon.ico" />
			</el-col>
		</el-row>
		<!-- 分页 -->
		<div class="w-full flex justify-center items-center mt-5">
			<el-scrollbar>
				<els-pagination :total="100" />
			</el-scrollbar>
		</div>
	</div>
</template>

<script name="MorePage" lang="ts" setup></script>

<style lang="scss" scoped></style>
